<style lang='scss' scoped>
	.user {
		height: 100vh;
		overflow: auto;
		color: #969497;
		font-size: 28rpx;
		overflow: auto;

		.userimage {
			width: 100%;
			height: 600rpx;
			padding-top: 100rpx;
			box-sizing: border-box;
			position: relative;
			background-color: none;

			.userbg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				vertical-align: middle;
				z-index: -1;
			}

			.user_titile {
				text-align: center;

				image {
					width: 200rpx;
					border-radius: 50%;
					vertical-align: middle;
				}
			}
		}

		.header {
			padding: 0 30rpx;

			.conter {
				margin-top: -50rpx;
			}

			.user_nav {
				display: flex;
				background-color: #fff;
				padding: 10rpx;
				border-radius: 10rpx;

				.list {
					text-align: center;
					flex: 1;

					text {
						color: red;
					}

				}
			}

			.dingdan {
				background-color: #fff;
				margin-top: 20rpx;
				padding: 10rpx;
				border-radius: 10rpx;

				.top {
					border-bottom: 1rpx #ccc solid;
				}

				.bottom {
					display: flex;

					.list {
						padding-top: 10rpx;
						flex: 1;
						text-align: center;

						image {
							width: 30%;
						}
					}
				}
			}

			.dizhi {
				background-color: #fff;
				margin-top: 20rpx;
				padding: 10rpx;
				border-radius: 10rpx;
			}

			.style {
				background-color: #fff;
				margin-top: 20rpx;
				padding: 10rpx;
				border-radius: 10rpx;

				.list {
					border-bottom: 1rpx #ccc solid;
					padding: 10rpx 0;
				}

				.list:nth-child(1) {
					display: flex;
					justify-content: space-between;
				}
			}

			.tuijian {
				background-color: #fff;
				margin-top: 20rpx;
				padding: 10rpx;
				border-radius: 10rpx;
				margin-bottom: 50rpx;
			}
		}
	}
</style>
<template>
	<view class='user'>
		<view class="userimage">
			<image class="userbg" src="../../static/52b1464290643af26775f95b539de4c0.jpeg" mode=""></image>
			<div class="user_titile">
				<image src="../../static/52b1464290643af26775f95b539de4c0.jpeg" mode="widthFix"></image>
				<view>微信用户</view>
			</div>
		</view>
		<view class="header">
			<!--  -->
			<div class="conter">
				<view class="user_nav">
					<view class="list">
						<text>0</text>
						<view class="item">
							收藏的店铺
						</view>
					</view>
					<view class="list">
						<text>{{shouchangNum}}</text>
						<view class="item">
							<navigator url="/pages/shouchang/shouchang">
								收藏的商品
							</navigator>
						</view>
					</view>
					<view class="list">
						<text>0</text>
						<view class="item">
							关注的商品
						</view>
					</view>
					<view class="list">
						<text>0</text>
						<view class="item">
							我的足迹
						</view>
					</view>
				</view>
				<!-- 我的单价 -->
				<view class="dingdan">
					<div class="top">我的订单</div>
					<div class="bottom">
						<view class="list">
							<image src="../../static/icon/全部订单.png" mode="widthFix"></image>
							<view class="item">
								<navigator url="/pages/Alldangdan/Alldangdan">
									全部订单
								</navigator>
							</view>
						</view>
						<view class="list">
							<image src="../../static/icon/待付款.png" mode="widthFix"></image>
							<view class="item">
								待发货
							</view>
						</view>
						<view class="list">
							<image src="../../static/icon/待收货.png" mode="widthFix"></image>
							<view class="item">
								待付款
							</view>
						</view>
						<view class="list">
							<image src="../../static/icon/退款.png" mode="widthFix"></image>
							<view class="item">
								退款/退货
							</view>
						</view>
					</div>
				</view>
				<view class="dizhi">
					收获地址管理
				</view>
				<div class="style">
					<div class="list">
						<text>联系客服</text>
						<text>400-618-4000</text>
					</div>
					<div class="list">
						意见反馈
					</div>
					<div class="list">关于我们</div>
				</div>
				<view class="tuijian">
					把应用推荐给其他人
				</view>
			</div>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				shouchangNum: 0
			}
		},
		onLoad(o) {},
		onShow() {
			let shouchanglist = uni.getStorageSync('shouchanglist') || []
			this.shouchangNum = shouchanglist.length
			this.getuserlist()
		},
		methods: {
			getuserlist() {
				uni.getUserInfo({
					success: (res) => {
						console.log(res);
					}
				})
			}
		}
	}
</script>
